<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="search">
      <el-form ref="form"
               :inline="true"
               class="searchForm"
               :model="form"
               label-width="80px">
        <el-form-item>
          <span>素材名称</span>
          <el-input v-model="form.name"
                    style="width:60%"
                    placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="素材类别:">
          <el-col :span="12">
            <el-select v-model="some1"
                       placeholder="请选择">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="1">--</el-col>
          <el-col :span="11">
            <el-select v-model="some2"
                       placeholder="请选择">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 用户数据区域 -->
    <el-button type="primary"
               @click="upBtn">上传按钮</el-button>
    <!-- 数据表单 -->
    <el-card class="form">
      <el-table :data="list"
                style="width: 100%">
        <el-table-column prop="mat_name"
                         label="素材名称"
                         width="180"></el-table-column>
        <el-table-column label="素材图"
                         width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px"
                      :src="scope.row.mat_img"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="mat_class"
                         label="素材类别"
                         width="180">
          <template slot-scope="scope">
            <div>
              {{scope.row.mat_class}}----{{scope.row.mat_class1}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mat_count"
                         label="价格"
                         width="180"></el-table-column>
        <el-table-column prop="data"
                         label="上传日期"
                         width="180"></el-table-column>
        <el-table-column prop="address"
                         label="操作"
                         width="180">
          <template slot-scope="scope">
            <a href="javascript:;"
               @click="aBut(scope.row)">编辑</a>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改用户弹出框 -->
    <el-dialog title="编辑"
               :visible.sync="is_mat">
      <el-form label-width="80px">
        <el-form-item label="素材名称">
          <el-input v-model="mat_Form.mat_name"></el-input>
        </el-form-item>
        <el-form-item label="素材类别:">
          <el-col :span="12">
            <el-select v-model="mat_Form.mat_class"
                       placeholder="请选择">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select v-model="mat_Form.mat_class1"
                       placeholder="请选择">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="素材价格">
          <el-input v-model="mat_Form.mat_count"></el-input>
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item>
          <el-upload class="upload-demo"
                     ref="upload"
                     action
                     :on-change="imgPreview"
                     :limit="1"
                     :file-list="fileList"
                     :auto-upload="false">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="editYes">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加用户弹出框 -->
    <el-dialog title="添加"
               :visible.sync="is_mat1">
      <el-form label-width="80px">
        <el-form-item label="素材名称">
          <el-input v-model="mat_Form1.mat_name"></el-input>
        </el-form-item>
        <el-form-item label="素材类别:">
          <el-col :span="12">
            <el-select v-model="mat_Form1.mat_class"
                       placeholder="请选择">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select v-model="mat_Form1.mat_class1"
                       placeholder="请选择">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="素材价格">
          <el-input v-model="mat_Form1.mat_count"></el-input>
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item>
          <el-upload class="upload-demo"
                     ref="upload"
                     action
                     :on-change="imgPreview1"
                     :limit="1"
                     :file-list="fileList"
                     :auto-upload="false">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="editYes1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        date1: '2020-02-01 ',
        date2: new Date()
      },
      list: [],
      list1: [],
      userConst: 0,
      orderConst: 0,
      expenserConst: 0,
      newObj: {},
      options1: [
        {
          value: '减肥中心',
          label: '减肥中心'
        },
        {
          value: '七七酒店',
          label: '七七酒店'
        },
        {
          value: '私人影院',
          label: '私人影院'
        },
        {
          value: '盲人按摩',
          label: '盲人按摩'
        }
      ],
      ddd: '',
      // 素材类别选择框区域
      some1: '',
      some2: '',
      // 编辑素材数据区域
      is_mat: false,
      mat_Form: {
        mat_name: '',
        mat_class: '',
        mat_class1: '',
        mat_count: '',
        mat_img: ''
      },
      disabled: true,
      fileList: [],
      index: 0,
      // 上传
      is_mat1: false,
      mat_Form1: {
        mat_name: '',
        mat_class: '',
        mat_class1: '',
        mat_count: '',
        mat_img: ''
      }
    }
  },
  created () {
    this.getlist()
  },
  mounted () { },
  methods: {
    async getlist () {
      const { data } = await this.$http.get('/officialMat')
      this.list = data.list
      this.list1 = data.list
    },
    // 编辑按钮
    aBut (scope) {
      this.is_mat = true
      this.index = scope.id
    },
    // 确认筛选按钮
    onSubmit () {
      if (this.form.name) {
        const arr = []
        this.list = this.list1
        this.list.forEach((item, index) => {
          if (item.mat_name === this.form.name) {
            arr.push(item)
          }
          this.list = arr
        })
        if (this.some1 || this.some2) {
          const arr2 = []
          this.list.forEach((item, index) => {
            if (item.mat_class === this.some1 || item.mat_class1 === this.some2) {
              arr2.push(item)
            }
          })
          this.list = arr2
        }
        if (this.some1 && this.some2) {
          const arr3 = []
          this.list.forEach((item, index) => {
            if (item.mat_class === this.some1 && item.mat_class1 === this.some2) {
              arr3.push(item)
            }
          })
          this.list = arr3
        }
      } else {
        if (this.some1 || this.some2) {
          console.log(1);
          const arr2 = []
          this.list.forEach((item, index) => {
            if (item.mat_class === this.some1 || item.mat_class1 === this.some2) {
              arr2.push(item)
            }
          })
          this.list = arr2
        }
        if (this.some1 && this.some2) {
          console.log(2);
          const arr3 = []
          this.list.forEach((item, index) => {
            if (item.mat_class === this.some1 && item.mat_class1 === this.some2) {
              arr3.push(item)
            }
          })
          this.list = arr3
        }
      }
    },
    // 重置按钮
    reset () {
      this.form.name = ''
      this.some1 = ''
      this.some2 = ''
      this.list = this.list1
    },
    // 确认修改
    editYes () {
      this.list[this.index].mat_class1 = this.mat_Form.mat_class1
      this.list[this.index].mat_name = this.mat_Form.mat_name
      this.list[this.index].mat_img = this.mat_Form.mat_img
      this.list[this.index].mat_class = this.mat_Form.mat_class
      this.list[this.index].mat_count = this.mat_Form.mat_count
      this.is_mat = false
    },
    // 上传图片成功
    imgPreview (file, fileList) {
      const fileName = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
      if (regex.test(fileName.toLowerCase())) {
        this.mat_Form.mat_img = URL.createObjectURL(file.raw) // 获取URL
      } else {
        this.$message.error('请选择图片文件')
      }
    },
    // 上传区域
    upBtn () {
      this.is_mat1 = true
    },
    editYes1 () {
      this.list.push(this.mat_Form1)
      this.is_mat1 = false
    },
    // 上传图片成功
    imgPreview1 (file, fileList) {
      const fileName = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
      if (regex.test(fileName.toLowerCase())) {
        this.mat_Form1.mat_img = URL.createObjectURL(file.raw) // 获取URL
      } else {
        this.$message.error('请选择图片文件')
      }
      this.mat_Form1.data = this.getDate()
      console.log(this.mat_Form1)
    },

    // 获取当前的时间
    getDate () {
      var date = new Date();
      var seperator1 = '-';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  }
}
</script>

<style scoped lang="less">
.search {
  padding: 20px 0 0 0;
  margin-bottom: 15px;
  .searchForm {
    display: flex;
    justify-content: left;
    align-content: center;
  }
}
.user {
  height: 50px;
  margin-bottom: 2px;
  span {
    margin: 20px;
  }
}
.form {
  padding: 5px 15px;
  margin-bottom: 15px;
  .el-table {
    font-size: 12px;
  }
}
</style>
